<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <div class="query-card">
        <!-- <el-row type="flex" align="middle">
        <el-col :span="12">-->
        <div class="grid-content bg-purple search">
          <el-form ref="query" :model="query" label-width="100px">
            <el-form-item style="margin-bottom:0px" label="优惠券名称">
              <i slot="label" class="el-icon-search" style="font-size:20px"></i>
              <el-input v-model="query.keywords" placeholder="请输入优惠券名称"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="分类">
              <el-select v-model="query.type" placeholder="请选择优惠券分类">
                <el-option label="全部" value="0"></el-option>
                <el-option label="满减" value="1"></el-option>
                <el-option label="立减" value="2"></el-option>
                <el-option label="折扣" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="grid-content bg-purple-light">
          <el-button type="primary" @click="queryAsk">查询</el-button>
          <el-button @click="queryReset">重置</el-button>
        </div>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card">
      <img
        class="watermark"
        v-if="baseApi== 'https://testouhun.wm2177.com'"
        style="left: 300px;"
        src="@/assets/watermark.png"
      />
      <div style="display:flex;justify-content: space-between;">
        <el-button type="primary" style="margin-bottom:20px" @click="addList">添加</el-button>
        <div style="display:flex">
          <el-button
            type="primary"
            style="margin-bottom:20px;margin-right:20px"
            @click="downLoad"
          >下载模板</el-button>
          <el-upload
            class="upload-demo"
            action="https://upload-z0.qiniup.com/"
            :limit="1"
            :data="postData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            type="primary"
            style="margin-bottom:20px"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background:'#eee'}"
        border
        style="width: 100%;margin-bottom: 20px;"
      >
        <!-- <el-table-column align="center" type="index" width="50" label="序号"></el-table-column> -->
        <el-table-column align="center" prop="id" width="50" label="ID"></el-table-column>
        <el-table-column align="center" prop="title" label="名称"></el-table-column>
        <!-- <el-table-column align="center" prop="send_num" label="发放数量"></el-table-column> -->
        <el-table-column align="center" label="可用盲盒" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.box_id==0">全部</div>
            <div v-else v-for="item in scope.row.box_name" :key="item">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发放方式">
          <template slot-scope="scope">
            <div v-if="scope.row.lq_type==1">后台发放</div>
            <div v-else>待定</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">满减</div>
            <div v-if="scope.row.type==2">立减</div>
            <div v-if="scope.row.type==3">折扣</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额">
          <template slot-scope="scope">
            <div v-if="scope.row.type==3">-</div>
            <div v-if="scope.row.type!=3">{{scope.row.money}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="折扣">
          <template slot-scope="scope">
            <div v-if="scope.row.type==3">{{scope.row.discount}}</div>
            <div v-if="scope.row.type!=3">-</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="满多少可用">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">{{scope.row.m_money}}</div>
            <div v-if="scope.row.type!=1">-</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="day_num" label="几天过期"></el-table-column>
        <el-table-column align="center" prop="add_time" label="添加时间"></el-table-column>
        <el-table-column align="center" prop="update_time" label="更新时间"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleEdite(scope.row)" type="text" size="small">编辑</el-button>
            <el-button
              style="margin-left:10px"
              @click="andleSend(scope.row)"
              type="text"
              size="small"
            >发放</el-button>
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="这是一段内容确定删除吗？"
              @onConfirm="handleDel(scope.row)"
            >
              <el-button
                style="margin-left:10px;color:red"
                slot="reference"
                type="text"
                size="small"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-left:50px">
        <el-form-item label="优惠券名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="满减" value="1"></el-option>
            <el-option label="立减" value="2"></el-option>
            <el-option label="折扣" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券金额" prop="money">
          <el-input v-model="form.money" placeholder="请输入优惠券金额" :disabled="form.type==3"></el-input>
        </el-form-item>
        <el-form-item label="满减金额" prop="m_money">
          <el-input v-model="form.m_money" placeholder="请输入满减金额" :disabled="form.type!=1"></el-input>
        </el-form-item>
        <el-form-item label="折扣" prop="discount">
          <el-input v-model="form.discount" placeholder="请输入折扣" :disabled="form.type!=3"></el-input>
        </el-form-item>
        <el-form-item label prop>
          <div style="color:red">0.85为85折</div>
        </el-form-item>
        <!-- <el-form-item label="发放数量" prop="num">
          <el-input v-model="form.num" placeholder="请输入发放数量"></el-input>
        </el-form-item>-->
        <el-form-item label="过期天数" prop="day_num">
          <el-input v-model="form.day_num" placeholder="请输入过期天数"></el-input>
        </el-form-item>
        <el-form-item label="领取方式" prop="lq_type">
          <el-select v-model="form.lq_type" placeholder="请选择领取方式">
            <el-option label="后台发放" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="盲盒">
          <!-- <el-form-item label="盲盒" prop="box_id"> -->
          <el-button type="primary" @click="selectBox">选择盲盒</el-button>
        </el-form-item>

        <el-form-item label="盲盒列表" v-if="blindname.length">
          <el-tag
            type="success"
            v-for="item in blindname"
            :key="item.name+item.id"
            style="margin-right:10px"
          >{{item.name+' '+item.price}}</el-tag>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="subCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 发放优惠券 -->
    <el-drawer
      :title="sendTitle"
      :visible.sync="sendDrawer"
      :direction="direction"
      :before-close="sendHandleClose"
    >
      <el-form
        ref="sendForm"
        :rules="sendRules"
        :model="sendForm"
        label-width="100px"
        style="margin-left:50px"
      >
        <el-form-item label="用户" prop="user_id">
          <el-button type="primary" @click="selectUser">选择用户</el-button>
        </el-form-item>
        <el-form-item label="用户" v-if="username.nickname">
          <el-tag
            type="success"
            style="margin-right:10px"
          >{{username.name+' '+username.nickname+' '+username.mobile}}</el-tag>
        </el-form-item>
        <el-form-item label="发放数量" prop="num">
          <el-input v-model="sendForm.num"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendSubmit">立即发放</el-button>
          <el-button @click="sendSubCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 盲盒 -->
    <el-dialog title="盲盒" :visible.sync="dialogVisible" width="60%" :before-close="dialogClose">
      <!-- 搜索 -->
      <el-card class="box-card">
        <div class="query-card">
          <!-- <el-row type="flex" align="middle">
          <el-col :span="12">-->
          <div class="grid-content bg-purple search">
            <el-form ref="dialogQuery" :model="dialogQuery" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="盲盒名称">
                <el-input v-model="dialogQuery.keywords" placeholder="请输入盲盒名称"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom:0px" label="分类">
                <el-select v-model="dialogQuery.type" placeholder="请选择优惠券分类">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="天选之人" value="1"></el-option>
                  <el-option label="无限盲盒" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="dialogQueryAsk">查询</el-button>
            <el-button @click="dialogQueryReset">重置</el-button>
          </div>
        </div>
      </el-card>

      <el-card class="box-card">
        <el-table
          :data="dialogData"
          ref="multipleTable"
          border
          tooltip-effect="dark"
          style="width: 100%;margin-bottom: 20px;"
          :header-cell-style="{background:'#eee'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" prop="id" label="ID"></el-table-column>
          <el-table-column align="center" label="封面">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.img" alt style="max-width:100px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.img"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="名称"></el-table-column>
          <el-table-column align="center" prop="price" label="价格"></el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type==1">天选之人</div>
              <div v-if="scope.row.type==2">无限盲盒</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:right">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="dialogCurrentPage"
            :total="dialogTotal"
            @current-change="dialogCurrentChange"
          ></el-pagination>
        </div>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 用户 -->
    <el-dialog title="用户选择" :visible.sync="sendVisible" width="60%" :before-close="sendClose">
      <!-- 搜索 -->
      <el-card class="box-card">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple search">
              <el-form ref="sendQuery" :model="sendQuery" label-width="100px">
                <el-form-item style="margin-bottom:0px" label="名称">
                  <el-input v-model="sendQuery.keywords" placeholder="用户名称、手机号"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light" style="text-align:right">
              <el-button type="primary" @click="sendQueryAsk">查询</el-button>
              <el-button @click="sendQueryReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <el-table
          :data="sendData"
          ref="sendmultipleTable"
          border
          tooltip-effect="dark"
          style="width: 100%;margin-bottom: 20px;"
          @row-click="sendhandleSelectionChange"
          :header-cell-style="{background:'#eee'}"
          highlight-current-row
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio v-model="sendForm.user_id" :label="scope.row.id">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" label="头像">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.himg" alt style="max-width:150px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.himg"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nickname" label="昵称"></el-table-column>
          <el-table-column align="center" prop="name" label="真实姓名"></el-table-column>
          <el-table-column align="center" prop="mobile" label="手机号"></el-table-column>
        </el-table>
        <div style="text-align:right">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="sendCurrentPage"
            :total="sendTotal"
            @current-change="sendCurrentChange"
          ></el-pagination>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sendVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  couponList,
  deletCoupon,
  boxList,
  addCoupon,
  editCoupon,
  sendCoupon,
  sendList,
  allSend
} from '@/api/coupon'
import { upload } from '@/api/system'
import { consumerList } from '@/api/consumer'
import { parseTime } from '@/utils/index'

export default {
  name: 'CouponList',
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //query
      query: {
        keywords: '',
        type: '0'
      },
      tableData: [],
      // 编辑抽屉
      drawer: false,
      sendDrawer: false,
      direction: 'rtl',
      title: '编辑',
      sendTitle: '发放',
      form: {
        title: '',
        type: '',
        money: '0',
        m_money: '0',
        discount: '0',
        day_num: '',
        lq_type: '',
        box_id: ''
        // num: ""
      },
      rules: {
        title: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请输选择类型', trigger: 'blur' }],
        money: [{ required: true, message: '请输入优惠金额', trigger: 'blur' }],
        m_money: [
          { required: true, message: '请输入满减金额', trigger: 'blur' }
        ],
        discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }],
        day_num: [
          { required: true, message: '请输入过期天数', trigger: 'blur' }
        ],
        lq_type: [
          { required: true, message: '请选择领取方式', trigger: 'blur' }
        ],
        box_id: [{ required: true, message: '请选择盲盒', trigger: 'blur' }]
        // num: [{ required: true, message: "请输入发放数量", trigger: "blur" }]
      },
      // 发放优惠券
      sendForm: {
        num: '',
        user_id: '',
        id: ''
      },
      username: {},
      sendRules: {
        num: [{ required: true, message: '请输输入数量', trigger: 'blur' }],
        user_id: [{ required: true, message: '请输选择用户', trigger: 'blur' }]
      },
      options: [],
      //盲盒弹出层
      dialogVisible: false,
      dialogData: [],
      // 盲盒分页数据
      dialogTotal: 0,
      dialogCurrentPage: 1,
      dialogPageSize: 10,
      //盲盒query
      dialogQuery: {
        keywords: '',
        type: '0',
        is_template: '0'
      },
      dialogIds: [],
      blindname: [],
      //用户弹出层
      sendVisible: false,
      sendData: [],
      // 用户分页数据
      sendTotal: 0,
      sendCurrentPage: 1,
      sendPageSize: 10,
      //sendquery
      sendQuery: {
        keywords: ''
      },
      loading: false,
      // 上传文件
      postData: {
        token: ''
      },
      url: '',
      uploadUrl: ''
    }
  },
  mounted() {
    this.getCouponList()
    this.getToken()
  },
  activated() {
    this.currentPage = 1
    this.query.keywords = ''
    this.query.type = '0'
    this.getCouponList()
  },
  methods: {
    async getCouponList() {
      this.loading = true
      const res = await couponList({
        page: this.currentPage,
        limit: this.pageSize,
        keywords: this.query.keywords,
        type: this.query.type
      })
      this.loading = false
      console.log(res)
      this.total = res.count
      this.tableData = res.data
      this.tableData.forEach((item) => {
        if (item.add_time == 0) {
          item.add_time = '-'
        } else {
          item.add_time = parseTime(item.add_time, '{y}-{m}-{d} {h}:{i}:{s}')
        }
        if (item.update_time == 0) {
          item.update_time = '-'
        } else {
          item.update_time = parseTime(
            item.update_time,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
      })
    },
    // 搜索列表
    queryAsk() {
      console.log(this.query)
      this.currentPage = 1
      this.getCouponList()
    },
    queryReset() {
      this.resetForm('query')
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.keywords = ''
      this.query.type = '0'
      this.getCouponList()
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addList() {
      this.drawer = true
      this.title = '添加'
    },
    //下载模板
    async downLoad() {
      window.open(
        'https://ouhun.wm2177.com/upload/templete/发放优惠券模板.xlsx'
      )
    },
    // 批量发放优惠券
    async handleAvatarSuccess(res, file) {
      this.uploadUrl = this.url + res.key
      console.log(this.uploadUrl)
      const response = await allSend({ url: this.uploadUrl })
      if (response.st == 1) {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      } else if (response == -1) {
        this.$message.error('上传失败')
        console.log(response)
      }
    },
    beforeAvatarUpload(file) {
      //   const isJPG = file.type === "image/jpeg";
      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      // const isLt1M = file.size / 1024 / 1024 < 1;
      // if (!isLt1M) {
      //   this.$message.error("上传头像图片大小不能超过 1MB!");
      //   return;
      // }
    },
    async getToken() {
      const res = await upload()
      this.postData.token = res.data.uptoken
      this.url = res.data.domain
    },
    // 表格操作
    async handleDel(row) {
      try {
        const res = await deletCoupon({ id: row.id })
        console.log(res)
        this.getCouponList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      } catch (error) {
        this.$message.error('删除失败')
        console.log(error)
      }
    },
    async handleEdite(row) {
      this.drawer = true
      this.title = '编辑'
      this.form.title = row.title
      this.form.type = row.type
      this.form.money = row.money
      this.form.m_money = row.m_money
      this.form.discount = row.discount
      this.form.day_num = row.day_num
      this.form.lq_type = row.lq_type
      this.form.box_id = row.box_id
      this.form.id = row.id
      await this.getBoxList()
      console.log(this.form.box_id.length)
      if (this.title == '编辑') {
        if (this.form.box_id.length == 0) {
          return
        } else if (this.form.box_id == 0) {
          this.blindname = []
          this.dialogData.forEach((item) => {
            const lz = {
              name: item.name,
              price: item.price,
              id: item.id
            }
            this.blindname.push(lz)
          })
        } else {
          this.blindname = []
          this.dialogData.forEach((item) => {
            this.form.box_id.forEach((id) => {
              console.log(id)
              if (item.id == id) {
                const lz = {
                  name: item.name,
                  price: item.price,
                  id: item.id
                }
                this.blindname.push(lz)
              }
            })
          })
        }
      }
    },
    // 发放优惠券
    async andleSend(row) {
      this.sendDrawer = true
      this.sendForm.id = row.id
      // const res = consumerList()
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current
      this.getCouponList()
    },
    //抽屉
    handleClose(done) {
      this.resetForm('form')
      const form = {
        title: '',
        type: '',
        money: '0',
        m_money: '0',
        discount: '0',
        day_num: '',
        lq_type: '',
        box_id: '',
        id: ''
      }
      this.blindname = []
      this.form = form
      this.drawer = false
      done()
    },
    subCancel() {
      this.resetForm('form')
      const form = {
        title: '',
        type: '',
        money: '0',
        m_money: '0',
        discount: '0',
        day_num: '',
        lq_type: '',
        box_id: '',
        id: ''
      }
      this.blindname = []
      this.form = form
      this.drawer = false
    },
    onSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.title === '添加') {
            console.log(this.form)
            if (this.form.discount >= 1) {
              this.$message.error('折扣不能大于等于1')
              return
            }
            const res = await addCoupon({ ...this.form })
            if (res.st === 1) {
              this.resetForm('form')
              const form = {
                title: '',
                type: '',
                money: '0',
                m_money: '0',
                discount: '0',
                day_num: '',
                lq_type: '',
                box_id: ''
              }
              this.blindname = []
              this.form = form
              this.getCouponList()
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.drawer = false
            } else {
              console.log(res)
              this.$message.error('添加失败')
            }
          } else if (this.title === '编辑') {
            console.log(this.form)

            if (this.form.discount >= 1) {
              this.$message.error('折扣不能大于等于1')
              return
            }
            const res = await editCoupon({ ...this.form })
            if (res.st === 1) {
              this.resetForm('form')
              const form = {
                title: '',
                type: '',
                money: '0',
                m_money: '0',
                discount: '0',
                day_num: '',
                lq_type: '',
                box_id: ''
              }
              this.blindname = []
              this.form = form
              this.getCouponList()
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.drawer = false
            } else {
              console.log(res)
              this.$message.error('编辑失败')
            }
          }
        }
      })
    },
    // 发放优惠券
    sendHandleClose(done) {
      this.resetForm('sendForm')
      const form = {
        num: '',
        user_id: '',
        id: ''
      }
      this.sendForm = form
      this.sendDrawer = false
      done()
    },
    sendSubCancel() {
      this.resetForm('sendForm')
      const form = {
        num: '',
        user_id: '',
        id: ''
      }
      this.sendForm = form
      this.sendDrawer = false
    },
    async sendSubmit() {
      console.log(this.sendForm)
      this.$refs['sendForm'].validate(async (valid) => {
        if (valid) {
          const res = await sendCoupon({ ...this.sendForm })
          if (res.st === 1) {
            this.resetForm('sendForm')
            const form = {
              num: '',
              user_id: '',
              id: ''
            }
            this.sendForm = form
            this.getCouponList()
            this.$message({
              message: '发放成功',
              type: 'success'
            })
            this.sendDrawer = false
          } else {
            console.log(res)
            this.$message.error('发放失败')
          }
        }
      })
    },
    //盲盒弹出层
    dialogClose(done) {
      done()
    },
    // 选择盲盒
    async selectBox() {
      this.dialogVisible = true
      await this.getBoxList()
      console.log(this.form.box_id.length)
      if (this.title == '编辑') {
        if (this.form.box_id == 0) {
          this.toggleSelection(this.dialogData)
        } else if (this.form.box_id.length == 0) {
          this.toggleSelection()
        } else {
          const data = []
          this.dialogData.forEach((item) => {
            this.form.box_id.forEach((id) => {
              console.log(id)
              if (item.id == id) {
                data.push(item)
              }
            })
          })
          this.toggleSelection(data)
        }
      }
    },
    //默认选中盲盒
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    async getBoxList() {
      const res = await boxList({
        page: this.dialogCurrentPage,
        limit: this.dialogPageSize,
        keywords: this.dialogQuery.keywords,
        is_template: this.dialogQuery.is_template,
        type: this.dialogQuery.type
      })
      console.log(res)
      this.dialogData = res.data
    },
    //盲盒分页改变
    dialogCurrentChange(current) {
      this.dialogCurrentPage = current
      this.getBoxList()
    },
    // 搜索列表
    dialogQueryAsk() {
      console.log(this.query)
      this.dialogCurrentPage = 1
      this.getBoxList()
    },
    dialogQueryReset() {
      this.resetForm('dialogQuery')
      this.total = 0
      this.dialogCurrentPage = 1
      this.dialogPageSize = 10
      this.dialogQuery.keywords = ''
      this.dialogQuery.type = '0'
      this.getBoxList()
    },
    handleSelectionChange(val) {
      this.blindname = []
      val.forEach((item) => {
        this.dialogIds.push(item.id)
        const lz = {
          name: item.name,
          price: item.price,
          id: item.id
        }
        this.blindname.push(lz)
      })
      this.dialogIds = Array.from(new Set(this.dialogIds))
      this.form.box_id = this.dialogIds
    },
    //盲盒分页改变
    sendCurrentChange(current) {
      this.sendCurrentPage = current
      this.userList()
    },
    // 用户
    sendClose(done) {
      done()
    },
    async selectUser() {
      this.sendVisible = true
      await this.userList()
    },
    async userList() {
      const res = await consumerList({
        limit: this.sendPageSize,
        page: this.sendCurrentPage,
        keywords: this.sendQuery.keywords
      })
      console.log(res)
      this.sendData = res.data
      this.sendTotal = res.count
    },
    // 搜索列表
    sendQueryAsk() {
      console.log(this.sendQuery)
      this.sendCurrentPage = 1
      this.userList()
    },
    sendQueryReset() {
      this.resetForm('sendQuery')
      this.sendTotal = 0
      this.sendCurrentPage = 1
      this.sendPageSize = 10
      this.sendQuery.keywords = ''
      this.userList()
    },
    sendhandleSelectionChange(val) {
      this.sendForm.user_id = val.id
      this.username.nickname = val.nickname
      this.username.name = val.name
      this.username.mobile = val.mobile
    }
  }
}
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  ::v-deep .el-form {
    display: flex;
  }
}
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}
::v-deep .el-input--medium .el-input__inner {
  width: 360px;
}
::v-deep .el-textarea__inner {
  width: 360px;
}
::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
</style>